<template>
    <div
        class="home-page min-h-screen w-full bg-[linear-gradient(139deg,#8eb3fd_2%,#f0f8fa_42%)] fixed inset-0 overflow-y-auto">
        <div class="px-4 pb-20">
            <!-- 头部 -->
            <div class="flex justify-between items-start space-x-6 pt-5 pb-10">
                <div class="py-4 text-gray-900 font-bold">
                    <span class="block text-2xl">新时代的AI试题系统</span>
                    <span class="block text-sm mt-2">30秒极速出题组卷</span>
                </div>
                <taro-image-core mode="widthFix" src="@/assets/images/ai-avatar.png"
                    class="w-24 h-24 taro-img__widthfix">
                    <img class="taro-img__mode-widthfix" src="@/assets/images/ai-avatar.png">
                </taro-image-core>
            </div>


            <!-- 选项卡 -->
            <div class="flex items-center space-x-6 mb-4 min-h-8">
                <button class="relative text-lg text-gray-900 font-bold">全部</button>
                <button class="relative text-sm text-gray-600 ">已开启</button>
                <button class="relative text-sm text-gray-600 ">已关闭</button>
            </div>

            <!-- 空状态 -->
            <div class="flex flex-col justify-center items-center mt-28">
                <div class="relative w-40 min-h-40 mb-4">
                    <img src="@/assets/images/empty-box.png" alt="空状态" class="w-full h-full">
                </div>
                <p class="font-bold text-gray-600 mr-4 text-center">没有考试</p>
                <p class="font-normal text-sm text-gray-400">快速又高效，创建你的第一场考试</p>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <TabBar 
            :active-tab="currentTab"
            @tab-change="handleTabChange"
        />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { House, Plus, User, DataAnalysis, Trophy } from '@element-plus/icons-vue'
import TabBar from '../components/TabBar.vue'


const currentTab = ref('首页')
const handleTabChange = (tabName) => {
    currentTab.value = tabName
}

</script>

<style scoped>
/* 如果需要自定义样式可以在这里添加 */

</style>